<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

        function Blog(props) {
            const siderBar = (
                <ul>
                {props.posts.map((post) => 
                    <li key={post.id}>
                        {post.title}
                    </li>
                )}    
                </ul>
            );

            const content =props.posts.map((post) =>
                <div key = {post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.content}</p>
                </div>
            );

            return (
                <div>
                    {siderBar}
                    <hr />
                    {content}
                </div>
            );
        }

        const posts = [
            {id:1,title:'hello world',content:'fisrt content'},
            {id:2,title:'hello ppp',content:'second content'},
        ];
        ReactDOM.render(
            <Blog posts={posts} />,
            document.getElementById('root') 
        )
    </script>
  </body>
</html>